<script src="<?=n_js('charts','echarts')?>"></script>
<script src="<?=n_js('weixin','cac')?>"></script>
<style>
#weixin-compete{margin-top:37px;}
#weixin-compete > .left {width:251px;float:left;}
#weixin-compete > .right {width:251px;float:right;}
#weixin-compete > .main {padding:0 10px;margin-left:251px;margin-right:251px;min-height: 1000px;}

#weixin-compete > .main .big-t{margin-top:90px;}
#weixin-compete > .main .big-t > div{display:inline-block;height:230px;}
#weixin-compete > .main .big-t > div > div{display:inline-block;width:115px;vertical-align: middle;text-align: center;}
#weixin-compete > .main .big-t .comp1{width:345px;}
#weixin-compete > .main .big-t .comp1 a{color:#000;font-weight: bold;}
#weixin-compete > .main .big-t .comp2{width:344px;}
#weixin-compete > .main .big-t .comp2 a{color:#000;font-weight: bold;}
#weixin-compete > .main .big-t h3{text-align:left;width:167px;height:44px;padding:6px;background: #E6E6E6;font-size:16px;font-weight: normal;}
#weixin-compete > .main .big-t h3 span{font-size:16px;display:block;color:#FE3E00;text-align:center;}
#weixin-compete > .main .big-t .m-num{}
#weixin-compete > .main .big-t .wxname{display:block;height:40px;color:#fff;}

#weixin-compete > .main .detail{margin-top:20px;}
#weixin-compete > .main .detail dl{display:inline-block;width:49%;}
#weixin-compete > .main .detail dl dt{line-height:32px;padding:0 32px;background-color: #3E3470;color:#fff;text-align:center;font-size:22px;}
#weixin-compete > .main .detail dl dd{}
#weixin-compete > .main .detail dl dd div{display:inline-block;text-align:center;}
#weixin-compete > .main .detail dl dd div span{font-size:22px;display:block;line-height: 30px;margin-top:30px;}
#weixin-compete > .main .detail dl dd .level1{width:166px;height:90px;}
#weixin-compete > .main .detail dl dd .level2{width:80px;height:90px;}
#weixin-compete > .main .detail dl dd .level0{width:108px;height:90px;}

#weixin-compete > .main .detail .comp1{}
#weixin-compete > .main .detail .comp2{}



</style>

<div id="weixin-compete" class="n-max-width n-middle">
	<div class="left">
		<?php
		$m = n_mod('weixin');
		$m->lines();
		?>
	</div>
	<div class="right">
		<?php
		$t = n_mod('weixin');
		$t->commend();
		?>
		<?php n_mod('weixin')->competeList();?>
	</div>
	<div class="main">
		<div style="background-color:#3E3471;padding:20px;">
			<div style="background-color: #fff;">
				
				<div id="chart" style="height:360px;">
				</div>
	
			</div>
		</div>


		<div class="big-t">
			<div class="comp1">
				<div>
					<div style="background-color: #3E3470;padding:10px;">
						<img style="border-radius:55px;width:60px;" src="<?=get_weixin_face($data['wxDetail1']['wxid'])?>" />
						<span class="wxname">
							<?=$data['wxDetail1']['wxname']?>
						</span>

					</div>
				</div>
				<div class="m-num">
					<h3>
						中指数
						<span><?=end($data['compete1']['weixin_index'])?></span>
					</h3>
					<h3 style="margin-top:5px;">
						日均阅读数
						<span><?=end($data['compete1']['average_read_num'])?></span>
					</h3>
				</div>
				<span style="display: block;text-align:center;font-weight: bold;margin-top:10px;">
					<?php if (in_array($data['wxDetail1']['wxid'], $data['cart'])):?>
						<a class="mpadd" href="javascript:void(0);" wxid="<?=$data['wxDetail1']['wxid']?>">
							<img src="<?=n_img('skin','heat-on.png')?>" />
							收藏
						</a>
					<?php else:?>
						<a class="mpadd add" href="javascript:void(0);" wxid="<?=$data['wxDetail1']['wxid']?>">
							<img src="<?=n_img('skin','heat-off.png')?>" />
							收藏
							</a>
					<?php endif;?>
					　　　　
					<a class="mpdiff" href="javascript:void(0);" wxid="<?=$data['wxDetail1']['wxid']?>" onclick="add('<?=$data['wxDetail1']['wxid']?>','<?=get_weixin_face($data['wxDetail1']['wxid'], 'jpg')?>','<?=$data['wxDetail1']['wxname']?>')">
					加入对比</a>
				</span>

			</div>
			<div class="comp2">
				<div>
					<div>
						<div style="background-color: #3E3470;padding:10px;">
							<img style="border-radius:55px;width:60px;" src="<?=get_weixin_face($data['wxDetail2']['wxid'])?>" />
								<span class="wxname">
									<?=$data['wxDetail2']['wxname']?>
								</span>
						</div>
					</div>
				</div>
				<div class="m-num">
					<h3>
						中指数
						<span><?=end($data['compete2']['weixin_index'])?></span>
					</h3>
					<h3 style="margin-top:5px;">
						日均阅读数
						<span><?=end($data['compete2']['average_read_num'])?></span>
					</h3>
				</div>
				<span style="display: block;text-align:center;font-weight: bold;margin-top:10px;">


					<?php if (in_array($data['wxDetail2']['wxid'], $data['cart'])):?>
						<a class="mpadd" href="javascript:void(0);" wxid="<?=$data['wxDetail2']['wxid']?>">
							<img src="<?=n_img('skin','heat-on.png')?>" />
							收藏
						</a>
					<?php else:?>
						<a class="mpadd add" href="javascript:void(0);" wxid="<?=$data['wxDetail2']['wxid']?>">
							<img src="<?=n_img('skin','heat-off.png')?>" />
							收藏
							</a>
					<?php endif;?>
					　　　　
					<a class="mpdiff" href="javascript:void(0);" wxid="<?=$data['wxDetail2']['wxid']?>" onclick="add('<?=$data['wxDetail2']['wxid']?>','<?=get_weixin_face($data['wxDetail2']['wxid'], 'jpg')?>','<?=$data['wxDetail2']['wxname']?>')">
					加入对比</a>
				</span>

			</div>
		</div>
		<!--div class="func" style="height:36px;padding:26px;">
			ooo
		</div-->

		
		<div class="detail">
			<dl class="comp1">
				<dt>总　　计</dt>
				<dd class="orange">
					<div class="level0"><span><?=round(array_sum($data['compete1']['weixin_index'])/7)?></span>中指数</div>
					<div class="level0"><span><?=round(array_sum($data['compete1']['average_read_num'])/7)?></span>平均阅读数</div>
					
					<div class="level0"><span><?=round(array_sum($data['compete1']['all_like_num'])/7)?></span>点赞数</div>
					<div class="level0"><span><?=round(array_sum($data['compete1']['all_read_num'])/7)?></span>总阅读数</div>

					<div class="level0"><span><?=round(array_sum($data['compete1']['head_read_num'])/7)?></span>头条阅读数</div>
					<div class="level0"><span><?=round(array_sum($data['compete1']['max_read_num'])/7)?></span>最高阅读数</div>
				</dd>
			</dl>
			<dl class="comp1">
				<dt>总　　计</dt>
				<dd class="blue">
					<div class="level0"><span><?=round(array_sum($data['compete2']['weixin_index'])/7)?></span>中指数</div>
					<div class="level0"><span><?=round(array_sum($data['compete2']['average_read_num'])/7)?></span>平均阅读数</div>
					
					<div class="level0"><span><?=round(array_sum($data['compete2']['all_like_num'])/7)?></span>点赞数</div>
					<div class="level0"><span><?=round(array_sum($data['compete2']['all_read_num'])/7)?></span>总阅读数</div>

					<div class="level0"><span><?=round(array_sum($data['compete2']['head_read_num'])/7)?></span>头条阅读数</div>
					<div class="level0"><span><?=round(array_sum($data['compete2']['max_read_num'])/7)?></span>最高阅读数</div>

				</dd>
			</dl>

		</div>
	</div>
</div>

<script>


option = {
    title : {
        text: '竞品PK'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['<?=$data['wxDetail1']["wxname"]?>','<?=$data['wxDetail2']["wxname"]?>']
    },

    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : <?=json_encode(array_keys($data['compete1']['weixin_index']))?>
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale:true
        }
    ],
    series : [
        {
            name:'<?=$data['wxDetail1']["wxname"]?>',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            }/*,
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }*/
        },
        {
            name:'<?=$data['wxDetail2']["wxname"]?>',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            }/*,
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }*/
        }
    ]
};




</script>



<script type="text/javascript">
var myChart1;
	require.config({
		paths: {
			echarts: '/charts/js'
		}
	});
	require(
		[
		'echarts',
		'echarts/chart/bar',
		'echarts/chart/line'
		],
		function (ec) {
			myChart1 = ec.init(document.getElementById('chart'));
			//myChart1.setOption(option);
			zzbIndex();

		}
	);
function zzbIndex(){
	option.title.text = "中指数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['weixin_index']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['weixin_index']))?>;
	
	myChart1.setOption(option);
}

function totalRead(){
	option.title.text = "总阅读数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['all_read_num']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['all_read_num']))?>;
	
	myChart1.setOption(option);
}
function avgRead(){
	option.title.text = "平均阅读数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['average_read_num']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['average_read_num']))?>;
	
	myChart1.setOption(option);
}
function toutiaoRead(){
	option.title.text = "头条阅读数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['head_read_num']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['head_read_num']))?>;
	
	myChart1.setOption(option);
}
function topRead(){
	option.title.text = "最高阅读数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['max_read_num']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['max_read_num']))?>;
	
	myChart1.setOption(option);
}
function zhang(){
	option.title.text = "点赞数";
	option.series[0].data = <?=json_encode(array_values($data['compete1']['all_like_num']))?>;
	option.series[1].data = <?=json_encode(array_values($data['compete2']['all_like_num']))?>;
	
	myChart1.setOption(option);
}
</script>


<div id="tips" style="width:480px;height:300px;border-radius: 5px;background-color:#34454D;display:none;position:absolute;text-align: center;">
	<div style="margin-top:88px;">
		<a class="n-btn-blue" href="/passport/login.html">请您登录</a>
	</div>
	<div style="margin-top:15px;">
		<a class="n-btn-blue" href="javascript:void(0);" onclick="tips.close();">返　回</a>
	</div>
</div>